<template>
  <div class="container">
    <div class="background">
      <img src="../assets/image/loginBackground.jpg" alt="Drone Background" class="background-img" />
    </div>
    <div class="login-overlay">
      <div class="logo-title-container">
        <img class="logo" src="../assets/image/logo.png" alt="logo"/>
        <h2 class="title">铁运无人机智能巡检系统</h2>
      </div>
      <div class="login-form">
        <div class="form_title">
          <span class="title_china">用户登录</span>
          <span class="title_en">USER LOGIN</span>
        </div> 
        <form @submit.prevent="onSubmit">
          <div class="form-group">
            <el-input
              v-model="userName"
              style="width: 100%"
              size="large"
              placeholder="请输入用户名称"
              :prefix-icon="User"
            />
          </div>
          <div class="form-group">
            <el-input
              v-model="passWord"
              style="width: 100%"
              size="large"
              placeholder="请输入登录密码"
              type="password"
              show-password
              :prefix-icon="Lock"
            />
          </div>
          <div class="form-group">
            <input v-model="rememberMe" id="rememberMe" type="checkbox" />
            <label for="rememberMe">记住密码</label>
          </div>
          <button type="submit" class="login-button">登录</button>
        </form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref , onMounted } from 'vue';
import { Lock ,User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';

    const userName = ref('');
    const passWord = ref('');
    const rememberMe = ref(false);
    const router = useRouter();


    // 检查是否有记住的用户名和密码
onMounted(() => {
    const savedUsername = localStorage.getItem('username');
    const savedPassword = localStorage.getItem('password');
    if (savedUsername && savedPassword) {
        userName.value = savedUsername;
        passWord.value = savedPassword;
        // rememberMe.value = true;
     }
   });

    const onSubmit = () => {
    // 4个情况
    // 无账号，有密码
    if(userName.value == '' && passWord.value){
      alert("请填写用户账号")
    }
    // 有账号，无密码
    else if(userName.value  && passWord.value == ''){
      alert("请填写登录密码")
    }
    // 有账号有密码
    else if (userName.value && passWord.value) {
        if (userName.value === 'ruiboer' && passWord.value === 'ruibo@123') {
          // 勾选记住我的逻辑，存储到本地
          localStorage.setItem('username', userName.value);
          localStorage.setItem('password', passWord.value);
          localStorage.setItem('isLoggedIn', 'true'); // 标记用户已登录
          router.push('/home');
            } else {
              alert('账号或密码错误');
            }
    }
    // 无账号，无密码
    else{
      alert('请填写用户账号和密码');
    }
    };
</script>
<style scoped>
.container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-overlay {
  display: flex;
  flex-direction: column;
  align-items: center; 
  position: absolute;
  height: 60%;
  top: 0;
  bottom: 0; 
  right: 10%;
  margin: auto 0;
  padding-left: 60px;
  padding-right: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
}

.logo-title-container {
  display: flex;
  align-items: center;
}

.logo {
  width: auto;
  height: 1.7em;
  margin-right: 20px;
  display: none;
}


.login-form {
  background-color: rgba(75, 185, 232, 0.4);
  padding: 30px;
  border-radius: 10px;
  width: 300px;
  border:1px solid #007bff;
}

.title {
  font-size: 1.7em;
  text-align: center;
  margin-bottom: 20px;
  color: #2a91ff;
  font-weight: 400;
}
.form_title {
  font-size: 1.1em;
  margin-bottom: 25px;
  color: #2a91ff;
  font-weight: 400;
  
}
.title_en {
  font-size: 0.6em;
  margin-left: 0.6em;
}

.form-group {
  margin-bottom: 30px;
  color: white;
}


.login-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.login-button:hover {
  background-color: #0056b3;
}
</style>
